<template>
  <div>
    <!-- <h3>热门歌曲</h3> -->
    <el-table
      :data="tableData"
      @row-dblclick="dblclick"
      class="tableData"
      v-loading="loading"
    >
      <!-- <el-table-column prop="name" label="歌名" width="300"></el-table-column> -->
      <el-table-column label="歌曲">
        <template #default="scope">
          <span> {{ scope.row.name }} </span>
          <!-- <span v-show="scope.row.survival === 0" style="color: red">
            (无音源或者可以播放)</span
          > -->
          <span v-show="scope.row.survival === 4" style="color: red">
            (需要购买专辑)</span
          >
          <span v-show="scope.row.survival === 1" style="color: red"> (VIP)</span>
          <img
            src="@/static/img/mv.svg"
            alt=""
            v-show="scope.row.mv !== 0"
            style="width: 20px; position: relative; top: 5px; left: 5px"
            @click="toMVPlayPage(scope.row.mv)"
          />
        </template>
      </el-table-column>

      <el-table-column prop="album" label="专辑" width="400">
        <template #default="scope">
          <span class="artistName" @click="toAlbumPage(scope.row.albumId)">
            {{ scope.row.albumName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="playTime" label="时间" width="100"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { storeToRefs } from "pinia";
import { storage } from "@/stores/storage";
import { getTopSongs, getSongUrl } from "@/service/songs.js";
import { getSongtime } from "@/utils/practicalFun";
import router from "../../router";
export default defineComponent({
  mounted() {
    this.getTopSongsFun();
  },
  setup() {
    let store = storage();
    let tableData = ref([]);

    const { singerId } = storeToRefs(store);
    const loading = ref(true);
    function getTopSongsFun() {
      getTopSongs(singerId.value)
        .then((res) => {
          if (res.status === 200) {
            let data = res.data.songs;
            for (let i = 0; i < data.length; i++) {
              tableData.value[i] = {};
              tableData.value[i].name = data[i].name;
              tableData.value[i].id = data[i].id;
              tableData.value[i].picUrl = data[i].al.picUrl;
              tableData.value[i].albumName = data[i].al.name;
              tableData.value[i].albumId = data[i].al.id;
              tableData.value[i].playTime = getSongtime(data[i].dt);
              tableData.value[i].survival = data[i].fee;
              tableData.value[i].mv = data[i].mv;
            }
            loading.value = false;
          }
        })
        .catch((err) => {
          if (err) ElMessage("网络错误,请重新尝试");
        });
    }

    async function dblclick(row) {
      let songUrl = "";
      await getSongUrl(row.id)
        .then((res) => {
          if (res.data.code === 200) {
            songUrl = res.data.data[0].url;
          } else if (res.data.code === -460) {
            ElMessage(`${res.data.message}`);
          }
        })
        .catch((err) => {
          if (err) ElMessage("网络错误,请重新尝试");
        });
      if (songUrl) {
        store.addSongPlayList(row.id, row.name, songUrl, row.picUrl);
        store.changeIsImmediatelyPlay();
      }
    }
    function toAlbumPage(id) {
      store.setAlbumId(id);
      router.push({
        path: "/album",
      });
    }
    function toMVPlayPage(id) {
      store.setMVId(id);
      router.push({
        path: "/mvplay",
      });
    }
    return {
      tableData,
      dblclick,
      toAlbumPage,
      getTopSongsFun,
      toMVPlayPage,
      loading,
    };
  },
});
</script>

<style scoped>
.tableData {
  width: 80%;
  margin: -20px 0 0 30px;
}
.artistName {
  white-space: pre;
}
.artistName:hover {
  color: black;
  cursor: pointer;
}
</style>
